<template>
  <div class="category-page">
    <nav-bar>
      <template v-slot:default>商品类目</template>
    </nav-bar>
    <div class="order-tab">
      <van-tabs @click-tab="clickTab">
        <van-tab title="销量排序" name="sales"/>
        <van-tab title="推荐排序" name="recommend"/>
        <van-tab title="价格排序" name="price"/>
        <van-tab title="评论排序" name="comments_count"/>
      </van-tabs>
    </div>
    <div class="left-menu">
      <van-sidebar v-model="sidebarTab" >
        <van-collapse style="width: 120px" v-model="selectedTabs">
          <van-collapse-item style="width: 80px" :title="item.name" :name="item.id" v-for="item in categoryState.categories" :key="item.id">
            <van-sidebar-item :title="subItem.name" v-for="subItem in item.children" :key="subItem.id"
                              @click="selectedCId(subItem.id)"/>
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>
    </div>
    <div class="goods-list" ref="wrapper">
      <div class="content">
        <van-card
            @click="detail(item.id)"
            v-for="item in  goodsState[goodsState.currentType].list"
            :key="item.id"
            :num="item.sales"
            :price="item.price"
            :desc="item.updated_at"
            :title="item.title"
            :thumb="item.cover_url"
            lazy-load
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {nextTick, onMounted, ref, watch} from "vue";
import {getAllCategoryGoods, getCategory} from "@/network/category";
import {categoryState, goodsState, state} from "@/views/category/state";
import BScroll from "@better-scroll/core";
import PullUp from "@better-scroll/pull-up";
import type {Goods} from "@/types/goods";
import {useRouter} from "vue-router";
import {useStore} from "@/store";

BScroll.use(PullUp);

const router = useRouter();
const store = useStore();
console.log(store);
function detail(id: number) {
  router.push({
    path: "/detail",
    query: {id}
  });
}

const selectedTabs = ref(["1"]);
const sidebarTab = ref(0);

function clickTab({name}: { name: string }) {
  goodsState.currentType = name;
}

let bScroll: any = null;
const wrapper = ref(null);
watch(goodsState, () => {
  nextTick(() => {
    bScroll = new BScroll(wrapper.value!, {
      probeType: 3,
      click: true,
      pullUpLoad: true // 上拉加载更多，默认 false
    });
    bScroll.on("pullingUp", () => {
      console.log("加载更多");
      type ObjectKey = keyof typeof goodsState;
      const type = goodsState.currentType as ObjectKey;
      const currentGood = (goodsState[type] as { list: Goods.Dto[], page: number });
      currentGood.page = currentGood.page + 1;
      getAllCategoryGoods(goodsState.currentType, state.category_id, currentGood.page).then((res) => {
        currentGood.list.push(...res.goods.data);
        // 完成上拉，等数据请求完成，要将新数据展示出来
        bScroll.finishPullUp();
        bScroll.refresh();
      });
    });
  });

});

function selectedCId(CId: number) {
  state.category_id = CId;
  init();
}

onMounted(() => {
  getCategory().then((res) => {
    categoryState.categories = res.categories;
  });
  init();
});

function init() {
  console.log(state.category_id);
  getAllCategoryGoods("sales", state.category_id).then((res) => {
    goodsState.sales.list = res.goods.data;
  });

  getAllCategoryGoods("recommend", state.category_id).then((res) => {
    goodsState.recommend.list = res.goods.data;
  });
  getAllCategoryGoods("price", state.category_id).then((res) => {
    goodsState.price.list = res.goods.data;
  });
  getAllCategoryGoods("comments_count", state.category_id).then((res) => {
    goodsState.comments_count.list = res.goods.data;
  });
}
</script>

<style lang="scss" scoped>
.category-page {
  position: relative;
  margin-top: 48px;
  height: 100vh;
}

.order-tab {
  position: fixed;
  right: 0;
  left: 100px;
  z-index: 9;

}

.left-menu {
  width: 100px;
  position: fixed;
  left: 0;
  top: 80px;

}

.goods-list {
  position: absolute;
  top: 50px;
  left: 100px;
  right: 0;
  overflow: hidden; // 超出部分隐藏
  height: 100%;
  //bottom: 60px;
  //height: 30%
  .wrapper {
    position: absolute;
    //top: 90px;
    //left: 100px;
    //height: 100%;
    //right: 0;
    //overflow: scroll;

    .content {
      width: 100%;
    }
  }
}

.van-collapse-item__wrapper{
    width: 100px;
}
</style>